<template>
	<Loading v-show="isLoading"></Loading>
	<div class="main">
		<div :class="schoolListflag ? 'chooseschool chooseschool_active' : 'chooseschool' ">
			<ul>
				<li>
					<img class="chooseschool_logo"  src="https://www.lawguanjia.com/images/wechat/index/findpassword_school.png">
					<div class="chooseschool_title">搜索结果</div>
					<div class="chooseschool_total">共{{pageData.total}}个</div>
				</li>
				
				<li v-for="(item,index) in schoolList" :key="index" @click="showschool($event)" v-bind:data-schoolname="item.schoolname" v-bind:data-ucode="item.code">
					<img class="chooseschool_logo"  v-bind:src="'https://www.lawguanjia.com/images/school/'+item.avatar">
					<div>{{item.name}}</div>
					<img class="chooseschool_choose" src="https://www.lawguanjia.com/images/wechat/index/findpassword_choose.png">
				</li>
				
			</ul>
		</div>
				
				
		<img src="../../../assets/images/wechat/index/leaderlogin/leaderlogin1.png">
		<ul class="main_form">
			<li>
				<label>
					<img src="../../../assets/images/wechat/index/leaderlogin/leaderlogin3.png">
				</label>
				<input type="text" @click="showschool($event)" v-model="leaderdata.schoolname" readonly placeholder="请选择院校" />
			</li>
			<li>
				<label>
					<img src="../../../assets/images/wechat/index/leaderlogin/leaderlogin4.png">
				</label>
				<input type="text" v-model="leaderdata.acctno" placeholder="请输入账号" maxlength="20" />
			</li>
			<li>
				<label>
					<img src="../../../assets/images/wechat/index/leaderlogin/leaderlogin5.png">
				</label>
				<input type="password" v-model="leaderdata.passwd" placeholder="请输入密码" maxlength="22" />
			</li>
		</ul>
		<input type="button" @click="findleader" value="账号密码登录" />
		<a @click="wechatAuth()" href="javascript:;">微信授权登录</a>
		
		<img src="../../../assets/images/wechat/index/leaderlogin/leaderlogin2.png">
	</div>
</template>

<script>
//引入组件
import Loading from '@/components/wechat/index/Loading.vue'
//引入js
import router from '../../../router'
import jsMd5 from 'js-md5'
	
export default {
  name: 'LeaderLogin',
  components: {
	Loading
  },
  data(){
    return {
		isLoading:true,//监控页面是否加载完毕
		ajaxFlag:true,//监控ajax请求，避免多次请求
		ajaxData:{},//ajax提交的值
		
		schoolListflag:false,
		pageData:{"total":0,"maxPage":0,"nowPage":0},
		schoolList:[],
		leaderdata:{
			schoolname:"",
			scode:0,
			acctno:"",
			passwd:""
		}
    }
  },
  created:function(){
	var that=this;
	that.isLoading=false;
  },
  beforeMount: function() {
	  
  },
  mounted: function () {
	  
  },
  methods:{
	showschool:function(e){
		var that=this;
		if(that.schoolListflag)
		{
			that.schoolListflag=false;
			that.leaderdata.schoolname=e.currentTarget.dataset.schoolname;
			that.leaderdata.scode=e.currentTarget.dataset.ucode;
		}
		else{
			if(!that.ajaxFlag)
			{
				console.log("请求过于频繁");
			}
			if(that.pageData.nowPage>=0&&that.pageData.nowPage<=that.pageData.maxPage)
			{
				that.ajaxFlag=false;
				that.ajaxData="nowPage="+that.pageData.nowPage;
				request({
					headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
					url: "/wechat/selectSchool",
					method: "post",
					data: that.ajaxData
				}).then(function(res){
				  if(res.flag)
				  {
					  that.pageData=res.pageData;
					  that.pageData.nowPage++;
					  that.schoolList=that.schoolList.concat(res.schoolList);
				  }
				  else{
					  console.log(res.content);
				  }
				  that.ajaxFlag=true;
				}).catch(function(error){
					  console.log(error);
				})

			}
			that.schoolListflag=true;
		}
	},
	findleader:function(){
		var that=this;
		if(!that.ajaxFlag)
		{
			alert("请求过于频繁");
		}
		else if(that.leaderdata.scode<10000)
		{
			alert("请选择学校");
		}
		else if(!that.leaderdata.acctno)
		{
			alert("请填写账号");
		}
		else if(!that.leaderdata.passwd)
		{
			alert("请填写密码");
		}
		else
		{
			that.ajaxFlag=false;
			that.ajaxData={};
			that.ajaxData["schoolCode"]=that.leaderdata.scode;
			that.ajaxData["acctno"]=that.leaderdata.acctno;
			that.ajaxData["passwd"]=jsMd5(that.leaderdata.passwd);
			request({
				headers:{'Content-Type': 'application/json;charset=UTF-8'},
				url: "/wechat/findLeader",
				method: "post",
				data: that.ajaxData
			}).then(function(res){
			  if(res.flag)
			  {
				  alert(res.content);
				  /*存储到ls*/
				  localStorage.setItem('identity',3);
				  localStorage.setItem('token',res.token);
				  router.push({path:'/wechatLeader/leaderCenter'})
			  }
			  else{
				  that.leaderdata.passwd="";
				  alert(res.content);
			  }
			  that.ajaxFlag=true;
			}).catch(function(error){
				console.log(error);
			})

		}
	},
	wechatAuth:function(){
		var that=this;
		window.location="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9f11d37a0a4b9f4b&redirect_uri="+encodeURIComponent("https://www.lawguanjia.com/dist/#/wechat/authorizeLogin")+"&response_type=code&scope=snsapi_userinfo&state=leaderlogin#wechat_redirect";
	}
  }
}
</script>

<style lang="scss" scoped>
.chooseschool{ width:0; height:100%; overflow:hidden; position:fixed; background:#fff; z-index:10; transition:all 0.4s ease-in 0s;}
.chooseschool_active{ width:100% !important}
.chooseschool>ul{ width:100%; }
.chooseschool>ul>li{ width:100%;height:50px;border-bottom:1px solid #E8E8E8;  overflow:hidden}
.chooseschool>ul>li>.chooseschool_logo{ width:30px; margin-top:10px; float:left; margin-left:20px;}
.chooseschool>ul>li>div{ width:230px; float:left;margin-top:10px; margin-left:10px; height:30px; line-height:30px; overflow:hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
.chooseschool>ul>li>.chooseschool_choose{ width:20px; margin-top:15px; float:right; margin-right:20px;}
.chooseschool_title{ width:100px !important; font-size:16px; font-weight: bolder;}
.chooseschool_total{ width:100px !important; float: right !important;margin-right:20px; text-align: right; color: #999;}

.main{ width: 100%;}
.main>img{ width: 100%; display:block;}
.main_form{ width: 320px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-color: #d8e7fa; border-radius: 10px;}
.main_form>li{ width:300px ; margin: auto; border-bottom: 1px solid #0154bc; overflow: hidden; position: relative;}
.main_form>li:nth-child(3){border-bottom: 1px solid #d8e7fa;}
.main_form>li>label{ width: 36px; height:36px; margin-top: 10px;background-color: #d8e7fa; margin-bottom: 10px; float: left; overflow: hidden;}
.main_form>li>label>img{ width: 100%;}
.main_form>li>input{ width: 264px; float: left;margin-top: 10px; height: 36px;border: none;outline: none; text-indent: 10px;font-size: 14px;background-color: #d8e7fa;color:#6396cf;}
.main_form>li>input::-webkit-input-placeholder {color:#6396cf;}
.main_form>li>input:-moz-placeholder {color:#6396cf;}
.main_form>li>input::-moz-placeholder {color:#6396cf;}
.main_form>li>input:-ms-input-placeholder {color:#6396cf;}
.captcha{ height:36px; position: absolute; top: 10px;right:0}

.main>input{width: 200px; display: block; margin: auto; height: 42px; line-height: 42px; background-color:#011d80; color: #FFFFFF; border: 1px solid #011d80; outline: none; border-radius: 21px;font-size: 16px;-webkit-appearance:none;}
.main>a{ width: 198px; display: block; margin: auto; line-height: 40px; border: 1px solid #011d80; text-align: center; border-radius: 21px; font-size: 16px; margin-top: 10px; color:#011d80}

</style>
